<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui" dir="ltr" lang="en-US">
	<h:head>
    <meta charset="utf-8"/>
    <title>Registration</title>
    <meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width"/>

    <link rel="stylesheet" href="CSS/style.css" media="screen"/>
    <link rel="stylesheet" href="CSS/style.responsive.css" media="all"/>
	<link rel="stylesheet" type="text/css" href="CSS/StyleSheet.css" />

    <script src="JavaScript/jquery.js"></script>
    <script src="JavaScript/script.js"></script>
    <script src="JavaScript/script.responsive.js"></script>
	<script type="text/javascript" src="JavaScript/Validator.js"></script>
	<script type="text/javascript">	
		function reg_user()
		{
			document.getElementById("regform").reset();
			document.getElementById("regform:userid").focus();
		}
	</script>
<meta name="description" content="Description"/>
<meta name="keywords" content="Keywords"/>



</h:head>
<h:body onload="reg_user();">
<div id="art-main">
	<header class="art-header">
		<div class="art-shapes">
			<h1 class="art-headline" data-left="32.49%">
				<a href="#">Travelport Birthday Calendar</a>
			</h1>
			<h2 class="art-slogan" data-left="28.44%">Celebrate and enjoy your birthday in style..!</h2>
			<!-- div class="art-object0" data-left="0%"></div-->
			<div class="art-object1834517147" data-left="0%"></div>
			<nav class="art-nav">
				<ul class="art-hmenu">
					<li><a href="index.xhtml">Home</a></li>
					<li><a href="birthdays.xhtml">Birthdays</a></li>
					<li><a href="register.xhtml" class="active">Register</a></li>
					<li><a href="gallery.xhtml">Gallery</a></li>
					<li><a href="contact.xhtml">Contact Us</a></li>
				</ul>
			</nav>
		</div>
	</header>
	<div class="art-sheet">
		<div class="art-layout-wrapper">
			<div class="art-content-layout">
				<div class="art-content-layout-row">
					<div class="art-layout-cell art-content">
						<article class="art-post art-article">
                			<div class="art-postcontent art-postcontent-0">
                				<div class="art-content-layout">
									<div class="art-content-layout-row">
										<div class="art-layout-cell layout-item-0" style="width: 34%" >
												<p style="text-align: center;">
													<img width="128" height="128" alt="" src="images/1300111884_box1.png" style="float:left;margin:10px;padding-right:10px;" class=""/>
												</p>
												<h3>User DOB Registration</h3>
 
												<h:form id="regform" onsubmit="return validate();">
												<h:panelGrid columns="2">
													<h:outputText value="UserId:"/>
													<h:inputText id="userid" value="#{user.userId}" style="border: 1px solid silver" maxlength="6"/>
													
													<h:outputText value="Name:"/>
													<h:inputText id="name" value="#{user.name}" style="border: 1px solid silver"/>
										
													<h:outputText value="EmailId:"/>
													<h:inputText id="email" value="#{user.email}" style="border: 1px solid silver"/>
													
													<h:outputText value="DOB Month:"/>
													<h:selectOneMenu id="dobMonth" value="#{user.dobMonth}"
										                required="true" requiredMessage="Select Month">
										                <p:ajax listener="#{user.handleMonthChange()}"	event="change" update="dobDate" process="@this" />
										                <f:selectItems value="#{user.months}"/>
										            </h:selectOneMenu>
													
													<h:outputText value="DOB Date:"/>
													<h:selectOneMenu id="dobDate" value="#{user.dobDate}"
										                required="true" requiredMessage="Select Date">
										                <f:selectItems value="#{user.dates}"/>
										            </h:selectOneMenu>
													
													<h:commandButton type="submit" value="Submit" action="#{user.handleUser}" class="art-button"/>
													<h:commandButton type="reset" value="Reset" class="art-button"/>
										 		</h:panelGrid>
										 		</h:form>
											</div>
										</div>
									</div>
									<div class="art-content-layout">
										<div class="art-content-layout-row">
											<div class="art-layout-cell layout-item-0" style="width: 100%" >
											</div>
										</div>
									</div>
								</div>
							</article>
						</div>
                        <div class="art-layout-cell art-sidebar1 clearfix">
                        	<div class="art-block clearfix">
								<div class="art-blockheader">
						            <h3 class="t">Upcoming Birthdays</h3>
						            <h3 class="t">In next two weeks</h3>
        						</div>
								<div class="art-blockcontent">
						        	<h:panelGrid id="dataBox2" columns="2" style="width:auto" rendered="#{fetchdata.getUpcomingUsers().isRowAvailable()}">
										<h:dataTable value="#{fetchdata.getUpcomingUsers()}" var="u"
											style="border: 1px solid silver" styleClass="user-table"
							    			headerClass="user-table-header"
							    			rowClasses="user-table-odd-row,user-table-even-row">
											<h:column>
												<f:facet name="header">Name</f:facet>
												<h:outputText value="#{u.name}" />
											</h:column>
											<h:column>
												<f:facet name="header">Date</f:facet>
												<h:outputText value="#{u.combinedDate}" />
											</h:column>
										</h:dataTable>
									</h:panelGrid>
									<h:outputText rendered="#{!fetchdata.getUpcomingUsers().isRowAvailable()}">
										<h5>No one to celebrate in next two weeks.</h5>
									</h:outputText>
								</div>
						</div>
					</div>
				</div>
			 </div>
		</div>
	</div>
	<footer class="art-footer">
		<div class="art-footer-inner">
			<div style="position: relative; display: inline-block; padding-left: 39px; padding-right: 39px">
				<p>
					<a href="index.xhtml">Home</a> | <a href="birthdays.xhtml">Birthdays</a> | <a href="register.xhtml">Register</a> | <a href="gallery.xhtml">Gallery</a> | <a href="contact.xhtml">Contact Us</a>
				</p>
				<p>Copyright © 2014. All Rights Reserved.</p>
			</div>
		</div>
	</footer>
</div>


</h:body></html>